<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="${request.contextPath}/statics/css/materialize.css?r=3">
        <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/common.css" />
        <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/nuaaindex.css?r=21" />
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <style>
          .group_2 p {
            margin: 0;
          }
          ul li{
            list-style: disc;
            margin-left: 40px;
          }
          .text-container-hidden2{
            height: 46px;display: -webkit-box;
          }
          .text-container img{
            width: 100%;
            height: 100%;
          }
          .text_103 p{
            margin: 0;
          }
          .text_2 p img{
            width: 100%;
            height: 100%;
          }
        </style>
      </head>
      <body>
        <div id="rrapp" class="page flex-col">
          <!--    <div class="nav-bar_1 flex-col"><span class="text_1">专家讲座</span></div>-->

          <div class="group_1 flex-col">
            <img v-if="about!=null" :src="about?about.img:''" />
            <div class="block_1 flex-col"></div>
            <span class="text_2" v-html="about?about.content:''">&nbsp;
            </span>
          </div>
          <!--文章列表-->
          <div  v-if="ifShowList" style="display: contents">
            <div style="display: none;">{{categoryId}}</div>
            <!--2：专家讲座-->
            <div class="group_2 flex-col" v-for="(item,index) in expertList" v-if="categoryId == 2">
              <div class="image-text_8 flex-row justify-between">
                <div class="single-avatar_1 flex-col">
                  <img style="border-radius: 50%" :src="item.img"  width="48" height="48"/>
                </div>
                <div class="text-group_8 flex-col">
                  <div class="text-wrapper_7 flex-row">
                    <span class="text_3">{{item.title}} </span>
                    <span style="margin: 2px 0 0 20px;">{{item.place}}</span>
                    <p class="text_4">{{item.remarks}}</p>
                  </div>
                  <div id="content" class="text-container text-container-hidden" style="padding-right: 20px;" v-html="item.content"></div>
                </div>
              </div>
              <!--展开/收起-->
              <div class="button_1">
                <div class="image-text_9">
                  <span class="text-group_2" style="float: left;" @click="toggleBtn">{{changeBtnTxt}}</span>
                  <img class="icon_1" style="float: left;"
                       referrerpolicy="no-referrer"
                       src="${request.contextPath}/statics/img/down.png"
                  />
                </div>
              </div>
            </div>

            <!--教师培训-->
            <div class="group_3 flex-col" v-for="(item,index) in expertList" v-if="categoryId == 4">
              <div class="section_3 flex-row justify-between">
                <span class="text_33">{{item.title}}</span>
                <div class="tag_1 flex-col" v-if="!item.ifCutOff">
                  <span  class="text_43">报名中</span>
                </div>
                <div v-else class="tag_2-0 flex-col">
                  <span class="text_14-0">已截止</span>
                </div>
              </div>
              <div class="text-wrapper_73 flex-row">
                <span class="text_53">活动地点</span>
                <span class="text_63">{{item.place}}</span>
              </div>
              <div class="text-wrapper_83 flex-row justify-between">
                <span class="text_73">时间范围</span>
                <span class="text_83">{{item.pubDate}}</span>
              </div>
              <div class="text-wrapper_9 flex-row justify-between">
                <span class="text_93">活动简介</span>
                <span class="text_103" v-html="item.content" style="height: 55px;overflow: hidden;"></span
                >
              </div>
              <div class="section_5 flex-row">
                <button class="button_13 flex-col">
                  <span class="text_113" @click="activityDetail">查看详情</span>
                </button>
                <button v-if="!item.ifCutOff" class="button_23 flex-col" @click="contactUs(item.id)">
                  <span class="text_123">联系我们</span>
                </button>
              </div>
            </div>

            <!--其他分类-->
            <div class="group_3 flex-col" v-for="(item,index) in expertList" v-if="!(categoryId == 2 || categoryId == 4)">
              <div style="display: flex;">
                <!--左图-->
                <div style="width: auto;">
                  <div class="single-avatar_1 flex-col">
                    <img style="border-radius: 50%" :src="item.img"  width="48" height="48"/>
                  </div>
                </div>
                <!--文字-->
                <div style="margin-left: 10px;">
                  <div style="color: rgba(0, 0, 0, 1);font-size: 16px;font-family: PingFangSC-Medium;font-weight: 500;">
                    <span class="text_33">{{item.title}}</span>
                  </div>
                  <div style="margin-top: 5px;">
                    <span >{{item.place}}</span>
                  </div>
                </div>
              </div>
              <div>
                <div :id="'content'+index" class="text-container text-container-hidden2" style="width: 100%;"
                     v-html="item.content"></div>
              </div>
              <!--展开/收起-->
              <div class="button_1">
                <div class="image-text_9">
                  <span class="text-group_2" style="float: left;" @click="toggleBtn2(index)" :id="'changeBtnTxt'+index">{{changeBtnTxt}}</span>
                  <img :id="'icon_'+index" class="icon_1" style="float: left;"
                       referrerpolicy="no-referrer"
                       src="${request.contextPath}/statics/img/down.png"
                  />
                </div>
              </div>
            </div>


          </div>

          <div class="group_5 flex-col" v-if="ifShowForm">
            <span class="text_14">联系我们</span>
            <div class="box_1 flex-col">
              <div class="group_6 flex-row">
                <div class="image-text_14 flex-row justify-between">
                  <div id="allmap"></div>
                  <img class="icon_2" referrerpolicy="no-referrer" :src="address.img"/>
                  <div class="text-group_11 flex-col" onclick="window.location.href='addr-list'">
                    <span class="text_15">{{address.title}}</span>
                    <span class="text_16">{{address.address}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="box_2 flex-col">
              <div class="group_8 flex-row justify-between">
                <img
                        class="icon_3"
                        referrerpolicy="no-referrer"
                        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc44329ab7a243d542d04ae57468c7ab8625ae86968bfa7e9d4d244d460c716bd"
                />
                <div class="text-wrapper_3">
                  <span class="text_17">姓名</span> <span class="text_18">*</span>
                </div>
              </div>
              <input type="text" class="" id="userName" v-model="dataForm.userName" placeholder="请输入姓名" required>

              <div class="group_9 flex-row justify-between">
                <img
                        class="icon_4"
                        referrerpolicy="no-referrer"
                        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng47dc77206cc696de97f86fe1b7a678d82abf0ff3e4e1f35bee06561cca283a87"
                />
                <div class="text-wrapper_4">
                  <span class="text_20">单位</span> <span class="text_21">*</span>
                </div>
              </div>
              <input type="text" class="" id="company" v-model="dataForm.school" placeholder="请输入单位" required>
              <div class="group_10 flex-row justify-between">
                <img
                        class="icon_5"
                        referrerpolicy="no-referrer"
                        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng08ba0e0c249b5279f0ad3a10edfb51b1260ee759463877a1afcab54ea4732030"
                />
                <div class="text-wrapper_5">
                  <span class="text_23">联系电话</span>
                  <span class="text_24">*</span>
                </div>
              </div>
              <input type="text" class="" id="phone" v-model="dataForm.phone" placeholder="请输入手机号" required>
              <div class="group_11 flex-row justify-between">
                <img
                        class="thumbnail_3"
                        referrerpolicy="no-referrer"
                        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng65d30d057af12a30d79ab32b97453a2fe44cc4b6b676aefc876dbde8829e131b"
                />
                <span class="text_26">邮箱</span>
              </div>
              <input type="text" class="" id="email" v-model="dataForm.email" placeholder="请输入邮箱" required>
              <div class="group_12 flex-row justify-between">
                <img class="icon_6"
                        referrerpolicy="no-referrer"
                        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng26dce911716662ad9dfe8aacfafbdc9eed8a97ceb7d4f9c43561ec7103726458"
                />
                <div class="text-wrapper_6">
                  <span class="text_28">省市地址</span>
                  <span class="text_29">*</span>
                </div>
              </div>
              <div class="group_13 flex-row justify-between" style="width: 92%; height: 3rem;">
                  <el-select class="text-group_5" style="width:50%;height:30px" v-model="province" placeholder="请选择">
                    <el-option v-for="(item,index) in regionList" :label="item.name" :value="index" ></el-option>
                  </el-select>
                  <el-select style="width:50%;height:30px"  v-model="city" placeholder="请选择">
                    <el-option v-for="(item,index) in cityList" :label="item.name" :value="index" ></el-option>
                  </el-select>
              </div>
              <div class="group_14 flex-row ">
                <img class="icon_7"
                     referrerpolicy="no-referrer"
                     src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb3b68a7eac91671ccfe313a068b4e76e64a7263652dd7f4b5ec323e3c8555ca1"/>
                <span v-if="categoryId == 2" class="text_31">科普主题意向</span>
                <span v-else-if="categoryId == 1" class="text_31">集训意向</span>
                <span v-else class="text_31">表演形式意向</span>

              </div>
              <input type="text" class="" id="intention" v-model="dataForm.intention" placeholder="请输入意向" required>
            </div>
            <button class="button_4 flex-col">
              <span class="text_33" @click="saveSign">提交</span>
            </button>
          </div>

        </div>
        <script src="${request.contextPath}/statics/js/jquery.min.js"></script>
        <script src="${request.contextPath}/statics/js/materialize.min.js"></script>
        <script src="${request.contextPath}/statics/js/owl.carousel.min.js"></script>
        <script src="${request.contextPath}/statics/js/fakeLoader.min.js"></script>
        <script src="${request.contextPath}/statics/js/contact-form.js"></script>
        <script src="${request.contextPath}/statics/js/main.js"></script>
        <script src="../statics/js/vue.min.js"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>

        <script>
          var vm = new Vue({
            el: '#rrapp',
            data: {
              categoryId: 4,
              about: {},
              expertList: [],
              dataForm: {
                userName: '',
                school: '',//单位
                phone: '',
                email: '',
                address: '',
                intention: '',
                categoryId: '',
              },
              ifShowList: false,
              ifShowForm: false,
              regionList: [], //后台获取地区数组
              province: '',
              city: '',
              district :'',
              cityList: [],
              districtList: [],
              changeBtnTxt: '展开',
              address: ''
            },
            watch:{
              province(newValue){
                if(newValue) {
                  vm.cityList = vm.regionList[newValue].children
                }
              },
              city(newValue) {
                if(newValue) {
                  vm.districtList = vm.cityList[newValue].children
                }
              },
              district(newValue){
                if(newValue) {
                  vm.dataForm.address = vm.regionList[vm.province].name + vm.cityList[vm.city].name + newValue
                }
              }
            },
            async created(){
              var url = location.search; //获取url中"?"符后的字串
              var tRequest = new Object();
              if (url.indexOf("?") != -1) {   //判断 URL 中是否包含查询字符串
                var str = url.substr(1);   //如果 URL 中包含查询字符串，截取查询字符串，去掉前面的“?”号。
                strs = str.split("&");    //将查询字符串按“&”号分割成一个个参数对。
                for(var i = 0; i < strs.length; i ++) {    //循环遍历所有的参数对。
                  tRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);    //对每一个参数对进行处理，将参数名和参数值存储到 tRequest 对象中。
                }
              }
              this.categoryId = tRequest.id
              this.dataForm.categoryId = this.categoryId
              if(this.categoryId == 1 || this.categoryId == 2){
                this.ifShowList= true
                this.ifShowForm= true
              }else if(this.categoryId == 4){
                this.ifShowList= true
              }else if(this.categoryId != 8){
                this.ifShowForm= true
              }

              this.queryAbout();
              this.queryExpertList();
              this.queryRegion();
              this.queryAddress();
            },
            methods:{
              queryAbout(){
                $.ajax({
                  type: 'GET',
                  url: '${request.contextPath}/h5/queryAbout/' + this.categoryId,
                  data: {},
                  success: function (res) {
                    if(res.code === 0){
                      vm.about = res.data;
                      if(vm.about && vm.about.title){
                        document.title = vm.about.title
                      }
                    }else{
                      alert(res.msg);
                    }
                  }
                })
              },
              queryExpertList(){
                $.ajax({
                  type: 'GET',
                  url: '${request.contextPath}/h5/queryExpertList/' + this.categoryId,
                  data: {},
                  success: function (res) {
                    if(res.code === 0){
                      console.log(res)
                      vm.expertList = res.data;

                    }else{
                      alert(res.msg);
                    }
                  }
                })
              },
              saveSign(){
                if(!vm.dataForm.userName){
                  alert("请输入姓名")
                  return;
                }
                if(!vm.dataForm.school){
                  alert("请输入单位")
                  return;
                }
                if(!vm.dataForm.address){
                  alert("请选择地址")
                  return;
                }

                var phonePattern = /^(13|15|16|18|14|17|19|1-)[0-9]{9}$/
                var emailPattern =  /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/
                if(!phonePattern.test(vm.dataForm.phone)){
                  alert("手机号码格式错误,请重新输入")
                  return;
                }
                // 邮箱校验
                if(vm.dataForm.email){
                  if(!emailPattern.test(vm.dataForm.email)){
                    alert("邮箱格式错误，请重新输入")
                    return;
                  }
                }
                $.ajax({
                  type: 'GET',
                  url: '${request.contextPath}/h5/saveSign',
                  data: vm.dataForm,
                  success: function (res) {
                    if(res.code === 0){
                      console.log(res)
                      alert("成功提交")
                    }else{
                      alert(res.msg);
                    }
                    vm.dataForm = {}
                    vm.province = ''
                    vm.city = ''
                    vm.district = ''
                    vm.dataForm.categoryId = vm.categoryId
                  }
                })
              },
              contactUs(newsId){
                window.location.href = "${request.contextPath}/h5/contactus?newsId=" + newsId + "&categoryId=" + vm.categoryId
              },
              queryRegion(){
                $.ajax({
                  type: 'GET',
                  url: '${request.contextPath}/h5/queryRegion',
                  data: {},
                  success: function (res) {
                    if (res.code === 0) {
                      vm.regionList = res.data
                    }
                  }
                })
              },
              // 切换按钮
              toggleBtn(obj){
                console.log('-------')
                if($('#content').hasClass('text-container-hidden')) {
                  $('#content').removeClass('text-container-hidden')
                  this.changeBtnTxt = '收起'
                  // jquery更换元素图片
                  $('.icon_1').attr('src', '${request.contextPath}/statics/img/up.png');
                } else {
                  $('#content').addClass('text-container-hidden')
                    this.changeBtnTxt = '展开'
                    $('.icon_1').attr('src', '${request.contextPath}/statics/img/down.png');
                }
              },

              toggleBtn2(index) {
                if ($('#content' + index).hasClass('text-container-hidden2')) {
                  $('#content' + index).removeClass('text-container-hidden2')
                  //this.changeBtnTxt = '收起'
                  $('#changeBtnTxt' + index).html("收起")
                  // jquery更换元素图片
                  $('#icon_' + index).attr('src', '${request.contextPath}/statics/img/up.png');
                } else {
                  $('#content' + index).addClass('text-container-hidden2')
                  //this.changeBtnTxt = '展开'
                  $('#changeBtnTxt' + index).html("展开")
                  $('#icon_' + index).attr('src', '${request.contextPath}/statics/img/down.png');
                }
              },
              // 查看详情
              activityDetail(){
                $('.text_103').height('auto');
              },
              queryAddress(){
                $.ajax({
                  type: 'GET',
                  url: '${request.contextPath}/h5/queryAddress/' + this.categoryId,
                  data: {},
                  success: function (res) {
                    if(res.code === 0){
                      const adList = res.data;
                      if(adList.length > 0){
                        vm.address = adList[0]
                        console.log(vm.address)
                      }
                    }else{
                      alert(res.msg);
                    }
                  }
                })
              },

            },
          });


        </script>
      </body>
    </html>
